<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Bar Viking</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
        <script src="../resources/js/validate.js"></script>
        <script src="../resources/js/logIn.js"></script>
        <script src="../resources/js/admin.js"></script>
        <script src="../resources/js/registerBar.js"></script>
        <link rel="stylesheet" type="text/css" href="../resources/css/default.css">
        <script src="../resources/js/header.js"></script>
        <link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300' rel='stylesheet' type='text/css'>
    </head>
    <body>
        <?php include '../resources/templates/header.php' ?>
        <script>
            $(document).ready(function() {
                 $.when(getClientInfo()).then(
                    function(location){
                        
                    }
                );
                $inputField = $("#postal_no");
                $outputField = $("#place");
                $inputField.keyup(function(){
                    if($inputField.val().match(/\d{4}/)) {
                        $.getJSON("http://adressesok.posten.no/api/v1/postal_codes.json?postal_code=" + $inputField.val() + "&callback=?",
                        function(data){
                            $outputField.val(data["postal_codes"][0].city);
                        });
                    } else{
                        $outputField.text("");
                    }
                });
            });
        </script>
        <div id="content-wrapper">
            <article id="content">
                <div id="register-bar-mandatory">
                    <div>Obligatorisk</div>
                    <table>
                        <tr>
                            <td style="width: 100px;">Navn</td>
                            <td><input type="text" id="name" name="name" mandatory autofocus></td>
                        </tr>
                        <tr>
                            <td>Adresse</td>
                            <td><input type="text" id="address" name="address" mandatory></td>
                        </tr>
                        <tr>
                            <td>Post No.</td>
                            <td><input type="text" id="postal_no" name="postal_no" mandatory></td>
                        </tr>
                        <tr>
                            <td>Poststed</td>
                            <td><input disabled type="text" id="place" name="place" mandatory></td>
                        </tr>
                        <tr>
                            <td>Inngangspris</td>
                            <td><input type="number" id="cover_charge" name="cover_charge" value="0" min="0" mandatory></td>
                        </tr>
                        <tr>
                            <td>Pris pr. halvliter</td>
                            <td><input type="number" id="beer_price" name="beer_price" min="0" value="0" mandatory></td>
                        </tr>
                        <tr>
                            <td>Aldersgrense</td>
                            <td><input type="number" id="age_limit" value="18" min="18" name="age_limit" mandatory></td>
                        </tr>
                    </table>
                </div>
                <div>
                    <table>
                        <tr>
                            <td style="width: 100px; vertical-align: top;">Description</td>
                            <td><textarea id="description" name="description" mandatory></textarea></td>
                        </tr>
                    </table>
                </div>
                <div id="register-bar-sosial">
                    <div>Sosialt</div>
                    <table>
                        <tr>
                            <td style="width: 100px;">Facebook</td>
                            <td>
                                <div id="input-container">
                                    <input type="text" id="facebook_user" name="facebook_user" placeholder="Brukernavn">
                                    <img src="../Resources/images/facebook.svg" id="input-img">
                                </div>
                            </td>
                            <td>
                                <a id="facebook_info" onclick="showInfobox('facebook_info', 'Her kan du fylle ut barens Facebookside.');">info(i)</a>
                            </td>
                        </tr>
                        <tr>
                            <td>Twitter</td>
                            <td>
                                <div id="input-container">
                                    <input type="text" id="twitter_user" name="twitter_user" placeholder="Brukernavn">
                                    <img src="../Resources/images/twitter.svg" id="input-img">
                                </div>
                            </td>
                            <td>
                                <a id="twitter_info" onclick="showInfobox('twitter_info', 'Her kan du skrive navnet på barens Twitterprofil.');">info(i)</a>
                            </td>
                        </tr>
                        <tr>
                            <td>Instagram</td>
                            <td>
                                <div id="input-container">
                                    <input type="text" id="instagram_user" name="instagram_user" placeholder="Brukernavn">
                                    <img src="../Resources/images/instagram.svg" id="input-img">
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>Spotify</td>
                            <td>
                                <div id="input-container">
                                    <input type="text" id="spotify_user" name="spotify_user" placeholder="Brukernavn">
                                    <img src="../Resources/images/spotify.svg" id="input-img">
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>Hashtag #</td>
                            <td><input type="text" id="hashtag" name="hashtag" placeholder="#minbar"></td>
                        </tr>
                    </table>
                </div>
                <div>
                    <button id="register-bar-btn" class="square-btn" onclick="" title="Registrer Bar">Registrer</button>
                </div>
            </article>
        </div>
        <!--        This span is used to measure the window-width correctly. Do not remove-->
        <span class="windowWidth"></span>
        <?php include '../resources/templates/footer.php' ?>
    </body>
</html>